<template>
    <div class="header">
        <div class="title">分类销售排行</div>
        <div class="button">
          <el-radio-group v-model="radio" @change="handleChange">
            <el-radio-button
              label="品类"
              value="category"
              size="large"
            
            ></el-radio-button>
            <el-radio-button
              label="商品"
              value="product"
              size="large"
             
            ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
</template>

<script setup>
import { ref } from 'vue';
const radio = ref('category');
const emits = defineEmits(['view-change']);
const handleChange = (value) => {
  emits('view-change', value);
}
</script>

<style scoped>
.header {
  border-bottom: 1px solid #eee;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.title {
  font-weight: bold;
  line-height: 30px;
}
.button {
  position: relative;
  top: -10px;
}
</style>